<template>
	<view class="concent">
		<view class="u-demo-block">
			<view class="u-demo-block__content">
				<u-tabs :list="list1" :scrollable="false" :current="currentIndex" @change="change">
				</u-tabs>
			</view>
		</view>
		<!-- <u-tabs :list="list1" @click="click"></u-tabs> -->
		<view class="orders">
			<view class="orders-item" v-for="(item, index ) in currentList" :key="item.id">
				<uni-card class="card">
					<view class="info">
						<view class="left">
							<view class="avatar">
								<u--image :src="item.shopAvatar" shape="circle" width="100rpx"
									height="100rpx"></u--image>
							</view>
							<view class="more">
								<view class="name">
									{{item.commodityName}}

									<view class="u-demo-block" style="margin-left: 10rpx;"
										v-if="item.orderType == $attrs">
										<view class="u-demo-block__content">
											<view class="u-page__tag-item">
												<u-tag size="mini" :text="item.shootingType"
													v-if="item.shootingType == '本片约拍'">
												</u-tag>
												<u-tag size="mini" :text="item.shootingType" type="success" v-else>
												</u-tag>
											</view>

										</view>
									</view>

								</view>
								<view class="style">
									{{item.orderStyle}}
								</view>
								<view class="time">
									{{formatOrderTime(item.ordersTime) }}
								</view>
							</view>
						</view>
						<view class="right">
							<view class="orderStatus"
								:class="item.orderStatus == 1 ? 'green':item.orderStatus==2?'yellow':''">
								{{item.orderStatus == 1 ? '交易成功':item.orderStatus==2?'交易中':'交易取消'}}
							</view>
							<view class="orderPrice">
								￥{{item.orderPrice}}
							</view>
							<view class="count">
								<view class="">
									× {{item.count}}
								</view>
							</view>
						</view>
					</view>
					<view class="btn">
						<view class="successfulTransaction_btn" v-if="item.orderStatus == 1">
							<!-- TODO:交易成功按钮 -->
							<view class="" style="width: 100%;" @click="addEvaluate(item.commodityId)"
								v-if="item.orderType==1">
								<u-button size="mini" type="primary" shape="square" text="追加评价"></u-button>

							</view>
							<view class="" style="width: 100%;" @click="show = true" v-else>
								<u-button size="mini" type="primary" shape="square" text="查看物流单号"></u-button>
								<u-modal :show="show" :closeOnClickOverlay="true" @close="closeModal" confirmText="复制单号"
									@confirm="copyOrderNumber(item.logisticsTrackingNumber)">
									<view class="modal">
										<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"
											width="50rpx" height="50rpx"></u--image>
										<text id="copy_input"
											style="margin-left: 20rpx;">圆通速递{{item.logisticsTrackingNumber}}</text>

									</view>
								</u-modal>
							</view>
						</view>
						<view class="inTransaction_btn" v-else-if="item.orderStatus == 2">
							<!-- TODO:交易中按钮 -->
							<view @click="cancelOrder(item.id, index)">
								<u-button size="mini" color="#616af3" shape="square" text="取消订单"></u-button>
							</view>
							<view @click="modifyOrder(item.id, item.shootingType, item.commodityName)">
								<u-button size="mini" type="warning " shape="square" text="修改订单"></u-button>
							</view>
							<view @click="continuePayment(item.id, item.shootingType, item.commodityName)">
								<u-button size="mini" type="primary" shape="square" text="继续付款"></u-button>
							</view>
						</view>
						<view class="transactionCancellation_btn" v-else-if="item.orderStatus == 3">
							<!-- TODO:交易失败按钮 -->
							<view class=""
								@click="reorder(item.commodityId, item.shopId, item.shootingType, item.commodityName)">
								<u-button size="mini" color="#616af3" type="primary" shape="square"
									text="重新下单"></u-button>
							</view>
						</view>
						<!-- <view class="complain_btn" @click="goReasonComplain(item.id)">
							<u-button size="mini" type="primary" shape="circle" text="申请投诉"></u-button>
						</view> -->
					</view>

				</uni-card>
			</view>
		</view>
		<!-- 物流界面 -->

	</view>
</template>

<script>
	import {
		formatTime
	} from '../../utils/formatTime.js'
	export default {

		created() {

		},
		onInit(query) {
			console.log(query);
		},
		onLoad(query) {
			this.currentIndex = query.index
			if (query.index == 1) {
				this.getPendingPaymentOrders()
			} else if (query.index == 2) {
				this.getToBeEvaluatedOrders()
			} else {
				this.currentList = this.ordersList
			}
		},
		data() {
			return {
				// 物流信息显示
				show: false,
				// 当前导航栏索引
				currentIndex: 0,
				ordersList: [{
					// 订单类型  1为拍摄订单  2为打印定制订单
					orderType: 2,
					// 订单id
					id: '1135152336',
					// 商品名称
					commodityName: '相册定制',
					// 交易状态 1 为交易成功 2 为交易中 3为交易取消
					orderStatus: 2,
					// 交易时间  时间戳
					ordersTime: 1692786334,
					// 商家头像
					shopAvatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 订单价格
					orderPrice: '30.00',
					// 商品数量
					count: '1',
					// 拍摄类型
					// shootingType: '本片约拍',
					// 风格
					orderStyle: '毕业风 24页/方8寸',
					// 商品id
					commodityId: '1155123',
					// 商家id
					shopId: '112235',
					// 物流单号
					logisticsTrackingNumber: 'YT7407424491003'
				}, {
					// 订单类型  1为拍摄订单  2为打印定制订单
					orderType: 2,
					// 订单id
					id: '113523336',
					// 商品名称
					commodityName: '摆台定制',
					// 交易状态 1 为交易成功 2 为交易中 3为交易取消
					orderStatus: 3,
					// 交易时间
					ordersTime: 2692750334,
					// 商家头像
					shopAvatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 订单价格
					orderPrice: '50.00',
					// 商品数量
					count: '1',
					// 拍摄类型
					// shootingType: '本片约拍',
					// 风格
					orderStyle: '轻奢/20寸',
					// 商品id
					commodityId: '1155123',
					// 商家id
					shopId: '112235',
					// 物流单号
					logisticsTrackingNumber: 'YT7407424491003'
				}, {
					// 订单类型  1为拍摄订单  2为打印定制订单
					orderType: 2,
					// 订单id
					id: '113552336',
					// 商品名称
					commodityName: '普通打印',
					// 交易状态 1 为交易成功 2 为交易中 3为交易取消
					orderStatus: 1,
					// 交易时间
					ordersTime: 1992764734,
					// 商家头像
					shopAvatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 订单价格
					orderPrice: '1.50',
					// 商品数量
					count: '1',
					// 拍摄类型
					// shootingType: '本片约拍',
					// 风格
					orderStyle: '乐凯绒面/1寸/1张',
					// 商品id
					commodityId: '1155123',
					// 商家id
					shopId: '112235',
					// 物流单号
					logisticsTrackingNumber: 'YT7407424491003'
				}, {
					// 订单类型  1为拍摄订单  2为打印定制订单
					orderType: 1,
					// 订单id
					id: '11552336',
					// 商品名称
					commodityName: '小黄约拍',
					// 交易状态 1 为交易成功 2 为交易中 3为交易取消
					orderStatus: 1,
					// 交易时间
					ordersTime: 1692764734,
					// 商家头像
					shopAvatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 订单价格
					orderPrice: '888.00',
					// 商品数量
					count: '1',
					// 拍摄类型
					shootingType: '本片约拍',
					// 风格
					orderStyle: '写真/古风/古代千金园林风',
					// 商品id
					commodityId: '115523',
					// 商家id
					shopId: '11235'
				}, {
					// 订单类型  1为拍摄订单  2为打印定制订单
					orderType: 1,
					// 订单id
					id: '11599836',
					// 商品名称
					commodityName: '小黄约拍',
					// 交易状态
					orderStatus: 2,
					// 交易时间
					ordersTime: 1692764734,
					// 商家头像
					shopAvatar: 'https://cdn.uviewui.com/uview/album/2.jpg',
					// 订单价格
					orderPrice: '888.00',
					// 商品数量
					count: '1',
					// 拍摄类型
					shootingType: '自主约拍',
					// 风格
					orderStyle: '写真',
					// 商品id
					commodityId: '115523',
					// 商家id
					shopId: '11235'

				}, {
					// 订单类型  1为拍摄订单  2为打印定制订单
					orderType: 1,
					// 订单id
					id: '11693236',
					// 商品名称
					commodityName: '小黄约拍',
					// 交易状态
					orderStatus: 3,
					// 交易时间
					ordersTime: 1692764734,
					// 商家头像
					shopAvatar: 'https://cdn.uviewui.com/uview/album/3.jpg',
					// 订单价格
					orderPrice: '888.00',
					// 商品数量
					count: '1',
					// 拍摄类型
					shootingType: '本片约拍',
					// 风格
					orderStyle: '写真',
					// 商品id
					commodityId: '115523',
					// 商家id
					shopId: '11235'

				}, {
					// 订单类型  1为拍摄订单  2为打印定制订单
					orderType: 1,
					// 订单id
					id: '155296586',
					// 商品名称
					commodityName: '小黄约拍',
					// 交易状态
					orderStatus: 2,
					// 交易时间
					ordersTime: 1692764734,
					// 商家头像
					shopAvatar: 'https://cdn.uviewui.com/uview/album/4.jpg',
					// 订单价格
					orderPrice: '888.00',
					// 商品数量
					count: '1',
					// 拍摄类型
					shootingType: '本片约拍',
					// 风格
					orderStyle: '写真',
					// 商品id
					commodityId: '1154523',
					// 商家id
					shopId: '11235'

				}, {
					// 订单类型  1为拍摄订单  2为打印定制订单
					orderType: 1,
					// 订单id
					id: '11529966',
					// 商品名称
					commodityName: '小黄约拍',
					// 交易状态
					orderStatus: 3,
					// 交易时间
					ordersTime: 1692764734,
					// 商家头像
					shopAvatar: 'https://cdn.uviewui.com/uview/album/5.jpg',
					// 订单价格
					orderPrice: '888.00',
					// 商品数量
					count: '1',
					// 拍摄类型
					shootingType: '自主约拍',
					// 风格
					orderStyle: '写真',
					// 商品id
					commodityId: '115523',
					// 商家id
					shopId: '11235'

				}],
				list1: [{
					name: '全部',
				}, {
					name: '待付款',
				}, {
					name: '待评价'
				}],
				// 当前显示数组
				currentList: []
			};
		},
		methods: {
			// 顶部标签变化
			change(i) {
				console.log(i);
				let index = i.index
				if (index == 1) {
					this.getPendingPaymentOrders()
				} else if (index == 2) {

					this.getToBeEvaluatedOrders()
				} else {
					this.currentList = this.ordersList
				}

			},
			// 筛选待评价订单
			getToBeEvaluatedOrders() {
				this.currentList = this.ordersList.filter((i) => {
					return i.orderStatus == 1
				})
			},
			// 筛选待付款订单
			getPendingPaymentOrders() {
				this.currentList = this.ordersList.filter((i) => {
					return i.orderStatus == 2
				})
			},
			// 取消订单
			cancelOrder(id, index) {
				uni.showModal({
					title: '提示',
					content: '您确定取消订单吗？',
					success: (res) => {
						if (res.confirm) {
							this.currentList[index].orderStatus = 3
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}

				})
			},
			// 修改订单
			modifyOrder(id, type, commodityName) {
				if (type == '自主约拍') {
					uni.navigateTo({
						url: `/pages/map/AutonomouslyOrders?id=${id}`
					})
				} else if (type == '本片约拍') {
					uni.navigateTo({
						url: `/pages/map/orders?id=${id}&type=${type}`
					})
				} else if (commodityName == '相册定制') {
					uni.navigateTo({
						url: `/Self-rinse/rinse/albumCustomer?id=${id}&type=${type}`
					})
				} else if (commodityName == '摆台定制') {
					uni.navigateTo({
						url: `/Self-rinse/rinse/tableCustomer?id=${id}&type=${type}`
					})
				} else if (commodityName == '普通打印') {
					uni.navigateTo({
						url: `/Self-rinse/rinse/defaultPrint?id=${id}&type=${type}`
					})
				}
			},
			// 继续付款
			continuePayment(id, type, commodityName) {
				if (type == '自主约拍') {
					uni.navigateTo({
						url: `/pages/map/AutonomouslyOrders?id=${id}`
					})
				} else if (type == '本片约拍') {
					uni.navigateTo({
						url: `/pages/map/orders?id=${id}&type=${type}`
					})
				} else {
					uni.navigateTo({
						url: `/Self-rinse/rinse/putPhoto?id=${id}&type=${type}`
					})
				}
			},
			// 重新下单
			reorder(commodityId, shopId, type, commodityName) {
				if (type == '自主约拍') {
					uni.navigateTo({
						url: `/subPackages_pipei/shop/shop?id=${shopId}`
					})
				} else if (type == '本片约拍') {
					uni.navigateTo({
						url: `/PackageB/photoDetail/photoDetail?${commodityId}`
					})
				} else if (commodityName == '相册定制') {
					uni.navigateTo({
						url: `/Self-rinse/rinse/albumCustomer?id=${commodityId}&type=${type}`
					})
				} else if (commodityName == '摆台定制') {
					uni.navigateTo({
						url: `/Self-rinse/rinse/tableCustomer?id=${commodityId}&type=${type}`
					})
				} else if (commodityName == '普通打印') {
					uni.navigateTo({
						url: `/Self-rinse/rinse/defaultPrint?id=${commodityId}&type=${type}`
					})
				}
			},
			// 追加评价
			addEvaluate(id) {
				uni.navigateTo({
					url: `/PackageB/photoDetail/photoDetail?${id}`
				})
			},
			// 关闭弹窗
			closeModal() {
				this.show = false
			},
			copyOrderNumber(logisticsTrackingNumber) {
				uni.setClipboardData({
					data: logisticsTrackingNumber,
					complete: () => {
						this.closeModal()
					}
				})
			},
			// 订单时间格式化
			formatOrderTime(time) {

				return formatTime(time, 8)
			}

		},

	}
</script>

<style lang="scss">
	.concent {
		padding: 0;
		margin: 0;
		box-sizing: border-box;

		.card {

			.info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;
				border-bottom: 1px solid #f8f8f8;

				.left {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.avatar {
						margin-right: 20rpx;
					}

					.more {
						.name {
							display: flex;
							align-items: center;
							font-size: $uni-font-size-lg;
							font-weight: 900;
							margin-bottom: 10rpx;
						}
					}
				}

				.right {
					margin-left: 10rpx;

					.orderStatus {
						margin-bottom: 10rpx;

					}

					.count {
						display: flex;
						justify-content: flex-end;
					}
				}
			}

			.btn {
				width: 100%;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.successfulTransaction_btn {
					width: 150rpx;
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
				}

				.inTransaction_btn {
					display: flex;
					justify-content: space-between;

					view {
						width: 150rpx;
						margin-left: 70rpx;
					}
				}

				.transactionCancellation_btn {
					width: 150rpx;
					display: flex;
					justify-content: flex-end;
				}
			}

		}

		.green {
			color: green;
		}

		.yellow {
			color: #ffaa00;
		}


	}

	.modal {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.u-page__tag-item {
		margin-right: 20px;
	}

	.u-demo-block__content {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
</style>